<template>
    <div class="login-container">
        <!-- 导航表单 -->
        <van-nav-bar class="page-nav-bar" title="登录">
            <van-icon @click="$router.back()" slot="left" name="cross" />
        </van-nav-bar>

        <!-- 登录表单 -->
        <van-form @submit="onSubmit" ref="loginForm">
            <van-field
                name="mobile"
                v-model="user.mobile"
                type="number"
                left-icon="smile-o"
                maxlength="11"
                :rules="userRules.mobile"
                placeholder="请输入手机号"
            >
                <i slot="left-icon" class="toutiao toutiao-shouji"></i>
            </van-field>
            <van-field
                v-model="user.code"
                left-icon="smile-o"
                name="code"
                type="number"
                maxlength="6"
                :rules="userRules.code"
                placeholder="请输入验证码"
            >
                <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
                <template #button>
                    <van-count-down @finish='isCountDownShow = false' v-if="isCountDownShow" :time="1000*60" format="ss s" />
                    <van-button v-else native-type="button" class="send-sms" @click="onSendSms" round size="small" type="default">发送验证码</van-button>
                </template>
            </van-field>
            <div class="login-btn-wrap">
                <van-button block type="info" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { login,sendSms } from "@/api/user";
export default {
    name: "LoginIndex",
    data() {
        return {
            user:{
                mobile:'13911111111',
                code:'246810'
            },
            userRules:{
                mobile:[{required:true,message:'不能为空'}],
                code:[{required:true,message:'不能为空'}],
            },
            isCountDownShow:false,//是否展示倒计时
        };
    },
    methods: {
        async onSubmit() {
            const user = this.user;

            this.$toast.loading({
                message: '登录中...',
                forbidClick: true,
                duration:0
            });
            try {
                const { data } = await login(this.user)
                this.$store.commit('setUser',data.data)
                this.$toast.success('登录成功');
                // 返回到原来页面
                this.$router.back()
            } catch (error) {
                this.$toast.fail('登录失败');
            }
        },
        async onSendSms(){
            try {
                await this.$refs.loginForm.validate('mobile')
            } catch (error) {
                return console.log('验证失败');
            }
            this.isCountDownShow = true;
            try {
                await sendSms(this.user.mobile)
                this.$toast('发送成功');
            } catch (error) {
                this.isCountDownShow = false
                if (error.response.status === 429) {
                    this.$toast('发送太频繁，请稍后重试');
                }else{
                    this.$toast('发送失败，请稍后重试');
                }
            }
        },
        onClickLeft() {
            Toast('返回');
        },
    },
};
</script>

<style lang='less' scoped>
.login-container {
    .toutiao{
        font-size: 37px;
    }
    .send-sms{
        width: 156px;
        height: 46px;
        line-height: 46px;
        background-color: #ededed;
        color: #666666;
    }
    .login-btn-wrap{
        padding: 53px 33px;
    }
}
</style>